In [ ]:
import pandas as pd
from bqplot import ColorScale, ColorAxis, DateScale, LinearScale, Axis, Lines, Figure
from ipywidgets import Label, VBox, Layout
from bqplot.market_map import MarketMap
import os
In [ ]:
data = pd.read_csv(os.path.abspath('../data_files/country_codes.csv'), index_col=[0])
country_codes = data.index.values
country_names = data['Name']
In [ ]:
market_map = MarketMap(names=country_codes,
# basic data which needs to set for each map
ref_data=data,
# Data frame which can be used for different properties of the map
# Axis and scale for color data
tooltip_fields=['Name'],
layout=Layout(min_width='800px', min_height='600px'))
market_map
In [ ]:
market_map.colors = ['MediumSeaGreen']
In [ ]:
market_map.font_style = {'font-size': '16px', 'fill':'white'}
In [ ]:
market_map.title = 'Country Map'
market_map.title_style = {'fill': 'Red'}
In [ ]:
gdp_data = pd.read_csv(os.path.abspath('../data_files/gdp_per_capita.csv'), index_col=[0], parse_dates=True)
gdp_data.fillna(method='backfill', inplace=True)
gdp_data.fillna(method='ffill', inplace=True)
In [ ]:
col = ColorScale(scheme='Greens')
continents = data['Continent'].values
ax_c = ColorAxis(scale=col, label='GDP per Capita', visible=False)
data['GDP'] = gdp_data.iloc[-1]
market_map = MarketMap(names=country_codes, groups=continents, # Basic data which needs to set for each map
cols=25, row_groups=3, # Properties for the visualization
ref_data=data, # Data frame used for different properties of the map
tooltip_fields=['Name', 'Continent', 'GDP'], # Columns from data frame to be displayed as tooltip
tooltip_formats=['', '', '.1f'],
scales={'color': col}, axes=[ax_c],
layout=Layout(min_width='800px', min_height='600px')) # Axis and scale for color data
In [ ]:
deb_output = Label()
def selected_index_changed(change):
deb_output.value = str(change.new)
market_map.observe(selected_index_changed, 'selected')
VBox([deb_output, market_map])
In [ ]:
# Attribute to show the names of the groups, in this case the continents
market_map.show_groups = True
In [ ]:
# Setting the selected countries
market_map.show_groups = False
market_map.selected = ['PAN', 'FRA', 'PHL']
In [ ]:
# changing selected stroke and hovered stroke variable
market_map.selected_stroke = 'yellow'
market_map.hovered_stroke = 'violet'
In [ ]:
# Adding data for color and making color axis visible
market_map.color = data['GDP']
ax_c.visible = True
In [ ]:
# Creating the figure to be displayed as the tooltip
sc_x = DateScale()
sc_y = LinearScale()
ax_x = Axis(scale=sc_x, grid_lines='dashed', label='Date')
ax_y = Axis(scale=sc_y, orientation='vertical', grid_lines='dashed',
label='GDP', label_location='end', label_offset='-1em')
line = Lines(x= gdp_data.index.values, y=[], scales={'x': sc_x, 'y': sc_y}, colors=['orange'])
fig_tooltip = Figure(marks=[line], axes=[ax_x, ax_y])
In [ ]:
market_map = MarketMap(names=country_codes, groups=continents,
cols=25, row_groups=3,
color=data['GDP'], scales={'color': col}, axes=[ax_c],
ref_data=data, tooltip_widget=fig_tooltip,
layout=Layout(min_width='900px', min_height='600px'))
# Update the tooltip chart
hovered_symbol = ''
def hover_handler(self, content):
global hovered_symbol
symbol = content.get('data', '')
if(symbol != hovered_symbol):
hovered_symbol = symbol
if(gdp_data.get(hovered_symbol) is not None):
line.y = gdp_data[hovered_symbol].values
fig_tooltip.title = content.get('ref_data', {}).get('Name', '')
# Custom msg sent when a particular cell is hovered on
market_map.on_hover(hover_handler)
market_map
This notebook uses data derived from the World Bank dataset.
See the LICENSE file for more information.
In [ ]:
In [ ]: